<template>
  <div class="home custom-scrollbar">
    <div class="header">
      <div class="logo">
        <img src="../assets/images/logo.png" alt="" />
        统一身份认证权限管理系统
      </div>
      <div class="userinfo">
        <el-dropdown placement="bottom-start">
          <span class="username">
            <el-avatar style="background-color: #09f">
              {{ fullname.slice(0, 1) }}
            </el-avatar>
            {{ fullname }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="out_login">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="cont">
      <el-menu class="aside" router unique-opened :default-active="titleActive">
        <el-sub-menu
          v-for="item in menuList"
          :key="item.menuId"
          :index="item.menuUrl"
        >
          <template #title>
            <span :class="{ menu_title: titleActive.includes(item.menuUrl) }">
              {{ item.menuName }}
            </span>
          </template>
          <el-menu-item
            v-for="i in item.children"
            :key="i.menuId"
            :index="i.menuUrl"
          >
            {{ i.menuName }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
      <div class="main">
        <div class="breadcrumb">
          <breadcrumb />
        </div>
        <div class="main_view">
          <el-config-provider :locale="zhCn">
            <router-view />
          </el-config-provider>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import zhCn from "element-plus/es/locale/lang/zh-cn";
import breadcrumb from "@/components/breadcrumb.vue";
import { get_menuAndFunction, menuList } from "@/router";
import { ref, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "@/store";
import { getCookie } from "@/utils/public";
import { ElMessageBox } from "element-plus";
import { getMenuAndFunction, getUser } from "@/api/user";

const router = useRouter();
const store = useStore();

const fullname = ref("");
const titleActive = computed(() => {
  const path = router.currentRoute.value.path;
  const paths = path.split("/");
  return paths.length > 3 ? paths.slice(0, -1).join("/") : path;
});

// 清除所有cookie
const clearAllCookies = () => {
  var cookies = document.cookie.split(";");
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    var eqPos = cookie.indexOf("=");
    var name = eqPos > -1 ? cookie.substr(0, eqPos).trim() : cookie.trim();
    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
  }
};

//退出
const out_login = () => {
  ElMessageBox.confirm("确定退出该账号吗？", {
    type: "error",
    distinguishCancelAndClose: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      clearAllCookies(); //清楚当前游览器所有cookie
      sessionStorage.clear();
      let urlWithoutParams = window.location.href.replace(/(\?.*)?(#.*)?$/, "");
      //urlWithoutParams='https://59.203.83.242:8090/uap'
      console.log("登出--系统回调地址", urlWithoutParams);
      window.location.href = `http://iam.ah.cegn.cn/idp/authCenter/GLO?redirectToUrl=${urlWithoutParams}&redirectToLogin=true&entityId=d9dde4457d904d9aa071150f35187215`;
      clearAllCookies(); //清楚当前游览器所有cookie
      sessionStorage.clear();
    })
    .catch(() => {});
};

let num = ref(0);
const set_fullname = async () => {
  num.value += 1;
  if (num.value > 3) return;
  const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
  if (userInfo) {
    fullname.value = userInfo.fullname;
  } else {
    const res = await getUser({
      platformId: "e92ee242-497f-4077-9ba7-462265a6d03b",
      access_token: getCookie("access_token"),
    });
    if (res.code === 200) {
      fullname.value = res.data.fullname;
      sessionStorage.setItem("userInfo", JSON.stringify(res.data));
      get_menuAndFunction();
    } else {
      setTimeout(async () => {
        await set_fullname();
      }, 200);
    }
  }
};

onMounted(() => {
  set_fullname();
});
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #f1f1f1;

    .logo {
      margin: 0 15px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 10px;
      img {
        width: 40px;
      }
    }

    .userinfo {
      margin: 0 40px;
      cursor: pointer;
      white-space: nowrap;
      .el-dropdown .username {
        font-size: 16px;
        background: none;
        border: none;
      }
    }
  }

  .cont {
    width: 100%;
    height: calc(100% - 70px);
    margin-top: 10px;
    display: flex;

    .aside {
      width: 260px;
      height: 100%;
      border: none;

      .menu_title {
        color: #09f;
      }
    }

    .main {
      width: calc(100% - 260px);
      display: flex;
      flex-direction: column;
      overflow: auto;
      background: #f2f3f5;

      .breadcrumb {
        //面包签
        width: 100%;
        height: 40px;
        padding: 0 10px;
        background: #fff;
        display: flex;
        align-items: center;
        gap: 8px;

        > span {
          color: #666;
          cursor: default;
          font-weight: bold;
        }

        > p {
          cursor: pointer;
          font-size: 14px;
          font-weight: 500;
        }

        > p:nth-child(1) {
          color: #909399;
        }
      }

      .main_view {
        flex: 1;
        margin: 10px;
      }
    }
  }
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  cursor: pointer; /* 鼠标悬停时显示指针形状 */
  background: #d0d0d2; /* 滑块背景颜色 */
  border-radius: 10px; /* 滑块圆角 */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景颜色 */
  border-radius: 10px; /* 轨道圆角 */
}

:focus-visible {
  outline: none; /* 去除轮廓线 */
  box-shadow: none; /* 如果之前有设置box-shadow，也一并去除 */
}
</style>
